<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row>
        <el-col :span="12">
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     @click="updateKeyPrepare" icon="el-icon-edit">确认备料
          </el-button>
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     @click="pBillPrint" icon="el-icon-edit">打印
          </el-button>
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     @click="pBillPrints" icon="el-icon-edit">批量打印
          </el-button>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-input size="small" style="width: 200px" class="filter-item more-search" placeholder="指令号-回车查询"
                    v-model="search.condition.ownerOrderNo"
                    @keyup.enter.native="list"></el-input>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline"
                     @click="moreClick">更多
          </el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="columnCheckList">
                  <el-checkbox label="houseName">仓库</el-checkbox>
                  <el-checkbox label="noticeNo">通知单号</el-checkbox>
                  <el-checkbox label="ownerOrderNo">指令号</el-checkbox>
                  <el-checkbox label="headId">备料单号</el-checkbox>
                  <el-checkbox label="providerName">承运商</el-checkbox>
                  <el-checkbox label="plateNumber">板车号</el-checkbox>
                  <el-checkbox label="planTime">计划装车时间</el-checkbox>
                  <el-checkbox label="loadingArea">备车道</el-checkbox>
                  <el-checkbox label="prepareStatus">备料状态</el-checkbox>
                  <el-checkbox label="prepareHeaderCreate">备料生成时间</el-checkbox>
                  <el-checkbox label="noticeHeadStatus">出库状态</el-checkbox>
                  <el-checkbox label="destLocationName">目的地</el-checkbox>
                  <el-checkbox label="shipmentTime">调度时间</el-checkbox>
                  <el-checkbox label="providerName">承运商</el-checkbox>
                  <el-checkbox label="plateNumber">车牌</el-checkbox>
                  <el-checkbox label="driverName">司机</el-checkbox>
                  <el-checkbox label="driverPhone">司机手机号</el-checkbox>
                  <el-checkbox label="userCreate">备料员</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
      <!--更多内容-->
      <div v-show="moreSearchVisible" style="height: auto;margin-top: 10px;">
        <el-form ref="form" :model="search.condition" label-width="100px" :inline="true">
          <el-form-item label="请输入板车号">
            <el-input placeholder="请输入板车号" class="w200" clearable v-model="search.condition.plateNumber"></el-input>
          </el-form-item>
          <el-form-item label="请输入车架号">
            <el-input placeholder="请输入车架号" class="w200" clearable v-model="search.condition.lotNo1"></el-input>
          </el-form-item>
          <!--<el-form-item label="车架号">-->
          <!--&lt;!&ndash;<el-input placeholder="请输入车架号" class="w200" clearable v-model="search.condition.lotNo1"></el-input>&ndash;&gt;-->
          <!--<el-input type="textarea" :rows="2" style="width: 250px"-->
          <!--v-model="search.condition.lotNo1"  placeholder="请输入车架号, 以逗号来分隔"></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="生成时间:">
            <el-date-picker class="w200" v-model="search.condition.startDate" type="datetime" placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            align="right"></el-date-picker>
            <span class="zhi-font">至</span>
            <el-date-picker class="w200" v-model="search.condition.endDate" type="datetime" placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            align="right"></el-date-picker>
          </el-form-item>
          <el-form-item label="备料状态">
            <el-select v-model="search.condition.preparationStatus" placeholder="请选择备料状态">
              <el-option label="未选择" value=""></el-option>
              <el-option label="未备料" value="10"></el-option>
              <el-option label="开始执行" value="20"></el-option>
              <el-option label="部分备料" value="30"></el-option>
              <el-option label="全部完成" value="40"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出库状态">
            <el-select v-model="search.condition.outShipStatus" placeholder="请选择出库状态">
              <el-option label="未选择" value=""></el-option>
              <el-option label="未出库" value="10"></el-option>
              <el-option label="部分出库" value="20"></el-option>
              <el-option label="全部出库" value="30"></el-option>
              <el-option label="取消出库" value="50"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="list" style="margin-left: 10px">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--备料列表-->
    <!--@row-click="getKeyPrepareDetail"-->
    <el-table ref="prepareListTable" :data="preparationList" v-loading="listLoading" element-loading-text="加载中" border
              fit highlight-current-row @row-click="getKeyPrepareDetail"
              style="width: 100%;margin-top:5px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="60"></el-table-column>
      <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in columnList'
                       :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'prepareStatus'">{{scope.row[value.key] | prepareHeadStatusFilter}}</div>
          <div v-else-if="value.key === 'noticeHeadStatus'">{{scope.row[value.key] | noticeHeadStatusFilter}}</div>
          <div v-else>{{ scope.row[value.key] }}</div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination :current-page.sync="search.current" :page-sizes="[10,20,30,50]" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-size="search.size" :total="search.total"
                     layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <div style="height: 30px;"></div>
    <!--备料明细信息列表-->
    <el-row>
      <el-col :span="24" style="text-align: right">
        <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <el-checkbox-group v-model="infoColumnCheckList">
                <el-checkbox label="cusOrderNo">客户订单号</el-checkbox>
                <el-checkbox label="cusWaybillNo">客户运单号</el-checkbox>
                <el-checkbox label="lotNo1">车架号</el-checkbox>
                <el-checkbox label="locationNo">库位</el-checkbox>
                <el-checkbox label="materielId">车型名称</el-checkbox>
                <!--<el-checkbox label="ownerId">客户</el-checkbox>-->
                <!--<el-checkbox label="dealerName">经销商</el-checkbox>-->
                <el-checkbox label="destAddress">目的地</el-checkbox>
                <el-checkbox label="vehicleDescribe">车型描述</el-checkbox>
                <el-checkbox label="preparationStatus">任务状态</el-checkbox>
                <el-checkbox label="preparetor">备料司机</el-checkbox>
                <el-checkbox label="lineStatus">出库状态</el-checkbox>
                <el-checkbox label="startTime">开始时间</el-checkbox>
                <el-checkbox label="finishTime">完成时间</el-checkbox>
                <el-checkbox label="destLocationCity">目的市</el-checkbox>
                <el-checkbox label="destLocationCounty">目的县</el-checkbox>
                <el-checkbox label="destLocationGid">地址编码</el-checkbox>
              </el-checkbox-group>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>

    <!--明细表-->
    <el-table ref="prepareInfoTableInfo" :data="prepareInfoList" v-loading="infoLoading" element-loading-text="加载中" border
              fit highlight-current-row
              style="width: 100%;margin-top:5px;margin-bottom: 200px" @selection-change="handleSelectionChangeInfo">
      <el-table-column type="selection" width="60"></el-table-column>
      <el-table-column :key="key" align="center" v-for='(value,key) in infoColumnList' :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'preparationStatus'">{{scope.row[value.key] | prepareLineStatusFilter}}</div>
          <div v-else-if="value.key === 'lineStatus'">{{scope.row[value.key] | noticeLineStatusFilter}}</div>
          <div v-else>{{ scope.row[value.key] }}</div>
        </template>
      </el-table-column>
    </el-table>

    <!--钥匙备料确认弹窗-->
    <el-dialog title="钥匙备料确认" :visible.sync="dialogVisible" width="30%" :before-close="handleDialogClose">

      <el-row>
        <el-col :span="3">
          <span style="color: white">'</span>
        </el-col>
        <span>确定要对所选钥匙备料任务做钥匙备料确认？</span>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="keyPrepareConfirm" :disabled = "confirmDisable">确 定</el-button>
      </span>
    </el-dialog>

    <!--打印-->
    <key-prepare-print
      :edit_flag="keyPreparePrintFlag"
      :dialog_main_title="dialogPrintTitle"
      :edit_params="keyPreparePrintParams"
      :select_row="keyPreparePrintSelectRow"
      ref="keyPreparePrintRef"
      @edit-close="keyPreparePrintHandleClose">
    </key-prepare-print>
    <!--打印 头 底部-demo-->
    <div style="display: none">
      <div id="keyPreparePrint_head" style="margin-top: 10px;">
        <div class="mb10 flex a-center">
          <span class="f22 ta-c">中联物流(中国)有限公司</span>
        </div>
        <div class="mb10 flex a-center">
          <span class="f16 ta-c">备料单</span>
        </div>
        <div class="pad-t-b10 bor-1-333 f14" style="border-bottom: none;">
          <div class="flex a-between mb10">
            <div class="ta-l flex-1">
              <span>备料单号: </span><span>{{title_data.headId}}</span>
            </div>
            <div class="ta-l flex-1">
              <span>调度指令: </span><span>{{title_data.ownerOrderNo}}</span>
            </div>
            <div class="ta-l flex-1">
              <span>车牌号: </span><span>{{title_data.plateNumber}}</span>
            </div>
          </div>
          <div class="flex a-between">
            <div class="ta-l flex-1">
              <span>装车道: </span><span>{{title_data.loadingArea}}</span>
            </div>
            <div class="ta-l flex-1">
              <span>生成时间: </span><span>{{title_data.createData | parseTime('{y}-{m}-{d}') }}</span>
            </div>
            <div class="ta-l flex-1">
              <span>移库司机: </span><span>{{title_data.driverName}}</span>
            </div>
          </div>
        </div>
      </div>
      <div id="keyPreparePrint_foot" class="pad-l10 flex a-between" type="flex" style="margin-bottom: 4px;">
        <div class="f16 ta-l flex-1">
          <span>钥匙保管员: </span><span></span>
        </div>
        <div class="f16 ta-l flex-1">
          <span>移车司机: </span><span></span>
        </div>
        <div class="f16 ta-l flex-1">
          <span></span>
        </div>
      </div>
    </div>
  </div>
</template>


<script type="text/ecmascript-6">
  import { Loading } from 'element-ui'
  import * as outboundKeyPrepareAPI from '@/api/outbound/outboundKeyPrepare'
  import waves from '@/directive/waves' // 水波纹指令
  import KeyPreparePrint from './outboundKeyPrepareConfig/keyPreparePrint'
  import * as Utils from '@/utils/util'
  // const TS1_JSON = require('./tsconfig')
  // const TS2_JSON = require('./ts2')
  const defaultColumn = [
    { key: 'houseName', title: '仓库', width: 120 },
    { key: 'noticeNo', title: '通知单号', width: 120 },
    { key: 'ownerOrderNo', title: '指令号', width: 120 },
    { key: 'headId', title: '备料单号', width: 150 },
    { key: 'providerName', title: '承运商', width: 150 },
    { key: 'plateNumber', title: '板车号', width: 100 },
    { key: 'planTime', title: '计划装车时间', width: 130 },
    { key: 'loadingArea', title: '备车道', width: 80 },
    { key: 'prepareStatus', title: '备料状态', width: 100 },
    { key: 'prepareHeaderCreate', title: '备料生成时间', width: 130 },
    { key: 'noticeHeadStatus', title: '出库状态', width: 100 },
    { key: 'destLocationName', title: '目的地', width: 180 },
    { key: 'shipmentTime', title: '调度时间', width: 150 },
    { key: 'providerName', title: '承运商', width: 150 },
    { key: 'plateNumber', title: '车牌', width: 120 },
    { key: 'driverName', title: '司机', width: '' },
    { key: 'driverPhone', title: '司机手机号', width: 100 },
    { key: 'userCreate', title: '备料员', width: '', fixed: 'right' }
  ]
  const defaultInfoColumn = [
    { key: 'cusOrderNo', title: '客户订单号', width: '' },
    { key: 'cusWaybillNo', title: '客户运单号', width: '' },
    { key: 'lotNo1', title: '车架号', width: 300 },
    { key: 'locationNo', title: '库位', width: '' },
    { key: 'stockProperty', title: '库存属性', width: '' },
    { key: 'materielId', title: '车型名称', width: '' },
    // { key: 'ownerId', title: '客户', width: 300 },
    // { key: 'dealerName', title: '经销商', width: 300 },
    { key: 'destAddress', title: '目的地', width: 300 },
    { key: 'vehicleDescribe', title: '车型描述', width: 180 },
    { key: 'preparationStatus', title: '任务状态', width: '' },
    { key: 'preparetor', title: '备料司机', width: '' },
    { key: 'lineStatus', title: '出库状态', width: '' },
    { key: 'startTime', title: '开始时间', width: '' },
    { key: 'finishTime', title: '完成时间', width: '' },
    { key: 'destLocationCity', title: '目的市', width: '' },
    { key: 'destLocationCounty', title: '目的县', width: '' },
    { key: 'destLocationGid', title: '地址编码', width: '' }
  ]
  export default {
    directives: {
      waves
    },
    data() {
      return {
        search: {
          current: 1,
          size: 10,
          total: 0,
          condition: {
            plateNumber: null,
            lotNo1: null,
            noticeHeadNo: null,
            ownerOrderNo: null,
            preparationStatus: null,
            outShipStatus: null,
            storeHouseId: null,
            startDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d} 00:00:00'),
            endDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d} 23:59:59')
          }
        },
        inputParam: {
          planTime: null,
          prepareLane: null,
          noticeHeadId: null
        },
        columnList: defaultColumn,
        columnCheckList: [
          'houseName',
          'noticeNo',
          'ownerOrderNo',
          'headId',
          'providerName',
          'plateNumber',
          'planTime',
          'loadingArea',
          'prepareStatus',
          'prepareHeaderCreate',
          'noticeHeadStatus',
          'destLocationName',
          'shipmentTime',
          'providerName',
          'plateNumber',
          'driverName',
          'driverPhone',
          'userCreate'
        ],
        infoColumnList: defaultInfoColumn,
        infoColumnCheckList: [
          'cusOrderNo',
          'cusWaybillNo',
          'lotNo1',
          'locationNo',
          'materielId',
          // 'ownerId',
          // 'dealerName',
          'destAddress',
          'vehicleDescribe',
          'preparationStatus',
          'preparetor',
          'lineStatus',
          'startTime',
          'finishTime'
        ],
        moreSearchVisible: true, // 已生成
        multipleSelection: [],
        preparationList: [],
        downloadLoading: false,
        notPreparationList: [],
        prepareInfoList: [], // 明细列表
        selectRowInfo: [], // 明细选中row
        listLoading: false,
        notListLoading: false,
        infoLoading: false,
        tableData: [],
        tableHeader: [],
        dialogVisible: false,
        confirmDisable: false,
        timePicker: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        checkInfoids: '',
        checkHeadRow: {},
        pagePrint: {
          current: 1,
          size: 6
        },
        title_data: {
          headId: '',
          ownerOrderNo: '',
          plateNumber: '',
          loadingArea: '',
          createData: 0,
          driverName: ''
        },
        table_data: [],
        keyPreparePrintFlag: false, // 打印预览页 显示隐藏
        dialogPrintTitle: null, // 打印预览页 标题
        keyPreparePrintSelectRow: null,
        keyPreparePrintParams: null // 向 打印预览页 传输参数
      }
    },
    components: {
      KeyPreparePrint
    },
    created() {
      this.list()
    },
    watch: {
      columnCheckList(valArr) {
        this.columnList = defaultColumn.filter(v => {
          for (let i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      },
      infoColumnCheckList(valArr) {
        this.infoColumnList = defaultInfoColumn.filter(v => {
          for (let i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      }
    },
    methods: {
      list() {
        const that = this
        // 更多
        const queryParam = {}
        if (this.moreSearchVisible) {
          queryParam.condition = that.search.condition
        } else {
          queryParam.condition = {
            ownerOrderNo: that.search.condition.ownerOrderNo,
            startDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d} 00:00:00'),
            endDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d} 23:59:59')
          }
        }
        // 分页
        queryParam.current = this.search.current
        queryParam.size = this.search.size
        queryParam.condition.storeHouseId = this.$store.getters.currentStorehouse.id
        that.listLoading = true
        outboundKeyPrepareAPI.queryKeyPreparePage(queryParam).then(result => {
          that.listLoading = false
          if (result.code === 0) {
            this.preparationList = result.data.records
            this.search.total = result.data.total
          } else {
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
        // that.listLoading = false
        // this.preparationList = TS2_JSON.data.records
        // this.search.total = TS2_JSON.data.total
      },
      // 主列表重置
      reset() {
        this.search.current = 1
        this.search.size = 10
        this.search.condition = {
          storeHouseId: this.$store.getters.currentStorehouse.id,
          ownerOrderNo: null,
          plateNumber: null,
          lotNo1: null,
          preparationStatus: null,
          outShipStatus: null
        }
        this.list()
      },
      // 单个明细查询
      getKeyPrepareDetail(row, event, column) {
        this.checkHeadRow = row
        const noticeHeadId = row.noticeHeadId
        const headId = row.headId
        this.infoLoading = true
        const queryParam = {}
        queryParam.noticeHeadId = noticeHeadId
        queryParam.headId = headId
        outboundKeyPrepareAPI.getKeyPrepareDetail(queryParam).then(result => {
          if (result.code === 0) {
            this.prepareInfoList = result.data
            this.infoLoading = false
            this.title_data = {}
            this.table_data = []
            // console.log('this.multipleSelection[0]', row)
            this.title_data = row
            this.title_data.createData = Date.now()
            this.prepareInfoList.forEach((item) => {
              this.table_data.push(item)
            })
          } else {
            this.infoLoading = false
            this.list()
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
        // this.title_data = row
        // this.title_data.createData = Date.now()
        // this.infoLoading = false
        // this.prepareInfoList = TS1_JSON.data
      },
      updateKeyPrepare() {
        const that = this
        const selects = that.selectRowInfo
        if (selects.length === 0) {
          this.$message({
            title: '错误提示',
            message: '请选择要创建备料计划的数据',
            type: 'warning',
            duration: 2000
          })
        } else {
          that.dialogVisible = true
        }
      },
      // 批量打印
      pBillPrints() {
        const that = this
        if (that.multipleSelection && that.multipleSelection.length > 0) {
          const ids = []
          that.multipleSelection.map(item => {
            ids.push(item.headId)
          })
          const headIds = ids.length > 1 ? ids.join(',') : ids[0]
          // 全屏loading 开启
          const loadingInstance = Loading.service({ fullscreen: true, lock: true, text: 'Loading',
            spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' })
          outboundKeyPrepareAPI.batchPrintPrepare({ headIds }).then(result => {
            if (result.code === 0) {
              that.dialogPrintTitle = '批量出库备料单打印预览'
              const func_params = {
                listData: result.data,
                size: 6 // 设置每页打印条目数
              }
              that.createdBatchPrintViewFunc(func_params, function(html) {
                that.keyPreparePrintFlag = true
                that.keyPreparePrintSelectRow = that.multipleSelection
                loadingInstance.close()  // 全屏loading 关闭
                that.$nextTick(() => {
                  that.$refs.keyPreparePrintRef.handleOpenConfig(html)
                })
              })
            } else {
              this.list()
              this.$notify({
                title: '信息提示',
                message: result.message,
                type: 'error',
                duration: 2000
              })
            }
          }).catch(() => {
            loadingInstance.close()
          })
        } else {
          that.$message({
            message: '未选择',
            type: 'warning',
            duration: 2000
          })
        }
      },
      // 打印
      pBillPrint() {
        const _this = this
        if (this.checkOneSelect(this.multipleSelection)) {
          if (this.prepareInfoList && this.prepareInfoList.length > 0) {
            // this.$prompt('请输入每页需打印的数据条数', '提示', {
            //   confirmButtonText: '确定',
            //   cancelButtonText: '取消',
            //   inputPlaceholder: '请输入大于0的正整数',
            //   inputType: 'number',
            //   inputPattern: /^[1-9]\d*$/,
            //   inputErrorMessage: '请输入0-' + (this.prepareInfoList.length ? this.prepareInfoList.length : 0) + '的正整数'
            // }).then(({ value }) => {
            //   // this.$message({
            //   //   type: 'success',
            //   //   message: '每页打印条数: ' + value
            //   // });
            //   this.dialogPrintTitle = '出库备料单打印预览'
            //   this.keyPreparePrintSelectRow = this.multipleSelection[0]
            //   this.keyPreparePrintParams = {
            //     prepareInfoList: this.prepareInfoList
            //   }
            //   // this.pagePrint.size = parseInt(value) // 设置每页打印条目数
            //   const func_params = {
            //     list: this.prepareInfoList,
            //     size: parseInt(value) // 设置每页打印条目数
            //   }
            //   _this.createdPrintViewFunc(func_params, function(html) {
            //     _this.keyPreparePrintFlag = true
            //     _this.$nextTick(() => {
            //       _this.$refs.keyPreparePrintRef.handleOpenConfig(html)
            //     })
            //   })
            // }).catch(() => {
            //   this.$message({
            //     type: 'info',
            //     message: '取消输入'
            //   })
            // })
            this.dialogPrintTitle = '出库备料单打印预览'
            this.keyPreparePrintSelectRow = this.multipleSelection[0]
            // this.keyPreparePrintParams = {
            //   prepareInfoList: this.prepareInfoList
            // }
            // this.pagePrint.size = parseInt(value) // 设置每页打印条目数
            const func_params = {
              tableData: {
                headId: _this.title_data.headId,
                ownerOrderNo: _this.title_data.ownerOrderNo,
                driverName: _this.title_data.driverName,
                loadingArea: _this.title_data.loadingArea,
                gmtCreate: Utils.parseTime(new Date(_this.title_data.createData), '{y}-{m}-{d}'),
                plateNumber: _this.title_data.plateNumber,
                preparePrintDetail: _this.prepareInfoList },
              size: 6 // 设置每页打印条目数
            }
            _this.createdPrintViewFunc(func_params, function(html) {
              _this.keyPreparePrintFlag = true
              _this.keyPreparePrintSelectRow = _this.multipleSelection
              _this.$nextTick(() => {
                _this.$refs.keyPreparePrintRef.handleOpenConfig(html)
              })
            })
          } else {
            this.$message({
              title: '错误提示',
              message: '该仓库暂无备料单',
              type: 'warning',
              duration: 2000
            })
          }
        }
      },
      // 批量创建打印页html
      createdBatchPrintViewFunc(params, callback) {
        const _this = this
        const { listData, size } = params
        let all_batch_html = ''
        // console.log('createdBatchPrintViewFunc', params)
        for (let c = 0; c < listData.length; c++) {
          const item = listData[c]
          const func_params = {
            tableData: {
              headId: item.headId,
              ownerOrderNo: item.shipmentGid, // shipmentGid
              driverName: item.driverName,
              loadingArea: item.loadingArea,
              gmtCreate: item.gmtCreate,
              plateNumber: item.plateNumber,
              preparePrintDetail: item.preparePrintDetail },
            size: size // 设置每页打印条目数
          }
          _this.createdPrintViewFunc(func_params, function(html) {
            if (c < listData.length - 1) {
              all_batch_html = all_batch_html + html + '<div style="page-break-after:always;"></div><br/>'
            } else {
              all_batch_html = all_batch_html + html
            }
          })
        }
        callback(all_batch_html)
      },
      // 创建打印页html
      createdPrintViewFunc(params, callback) {
        // console.log('createdPrintViewFunc', params)
        // const keyPreparePrint_head = document.getElementById('keyPreparePrint_head')
        const keyPreparePrint_foot = document.getElementById('keyPreparePrint_foot')
        // const head_comp = keyPreparePrint_head.outerHTML // 需要打印的 头部
        const tail_comp = keyPreparePrint_foot.outerHTML // 需要打印的 足部
        const { size, tableData } = params
        // const current = parseInt(list / size)
        let table_item_html = ''
        let all_html = ''
        let all_item_html = ''
        const head_comp = this.tableHeadHtmlFunc(tableData) // 头部 demo 创建
        const average_arr = this.averageSplitArrayFunc(tableData.preparePrintDetail, size) // 平均分割数组
        // table 样式
        const style_html = '<style scoped>' + '@page{ margin: 0;size: auto;}table.printTable{margin-left: auto;margin-right: auto;text-align: center;border-collapse:collapse;}.printTable>tbody>tr,.printTable>tbody>tr>th,.printTable>tbody>tr>td { border:1px solid #333 !important;}td { padding:4px 2px !important;line-height: 18px;}' + '</style>'
        // 公共样式
        const style_html2 = '<style scoped>' + '.flex{display: flex;display: -webkit-flex;}.flex-1{flex: 1;}.a-center{justify-content:center;}.a-between{justify-content: space-between;}' +
          '.mb10{margin-bottom: 10px}.f14{font-size: 14px}.f16{font-size: 16px}.f22{font-size: 16px}.ta-c{text-align: center}.ta-l{text-align: left}.pad-t-b10{padding-top: 10px;padding-bottom: 10px}' +
          '.bor-1-333{border:1px  solid #333;}.pad-l10{padding-left: 10px}' + '</style>'
        // 组装单个 打印页html
        for (let c = 0; c < average_arr.length; c++) {
          if (c < average_arr.length - 1) {
            table_item_html = this.tableRoundHtmlFunc(average_arr[c], c, size)
            all_item_html = head_comp + table_item_html + tail_comp + '<div style="page-break-after:always;"></div><br/>'
          } else {
            table_item_html = this.tableRoundHtmlFunc(average_arr[c], c, size)
            all_item_html = head_comp + table_item_html + tail_comp
          }
          all_html = all_html + all_item_html
        }
        all_html = all_html + style_html + style_html2
        callback(all_html)
      },
      // 平均分割数组,每个数组数目int
      averageSplitArrayFunc(arr, int) {
        const now_arr = []
        if (arr && arr.length > 0) {
          for (var i = 0; i < arr.length; i += int) {
            now_arr.push(arr.slice(i, i + int))
          }
        }
        return now_arr
      },
      // 创建 表头 demo
      tableHeadHtmlFunc(headData) {
        let newTableHead = '<div style="margin-top: 10px;"><div class="mb10 flex a-center"><span class="f22 ta-c">中联物流(中国)有限公司</span></div>'
        newTableHead += '<div class="mb10 flex a-center"> <span class="f16 ta-c">备料单</span></div><div class="pad-t-b10 bor-1-333 f14" style="border-bottom: none;">'
        newTableHead += '<div class="flex a-between mb10"><div class="ta-l flex-1"><span>备料单号: </span> <span>' + headData.headId + '</span> </div>'
        newTableHead += '<div class="ta-l flex-1"><span>调度指令: </span><span>' + (headData.ownerOrderNo ? headData.ownerOrderNo : '') + '</span></div>'
        newTableHead += '<div class="ta-l flex-1"><span>车牌号: </span><span>' + (headData.plateNumber ? headData.plateNumber : '') + '</span></div></div>'
        newTableHead += '<div class="flex a-between"><div class="ta-l flex-1"><span>装车道: </span><span>' + (headData.loadingArea ? headData.loadingArea : '') + '</span></div>'
        newTableHead += '<div class="ta-l flex-1"><span>生成时间: </span><span>' + (headData.gmtCreate ? headData.gmtCreate : '') + '</span></div>'
        newTableHead += '<div class="ta-l flex-1"><span>移库司机: </span><span>' + (headData.driverName ? headData.driverName : '') + '</span></div></div></div></div>'
        return newTableHead
      },
      // 创建每个table demo
      tableRoundHtmlFunc(data, current, size) {
        let newTable = '<table class="printTable" style="font-size:12px;margin-bottom:20px;width: 100%;text-align: center;border:1px solid #333;">'
        newTable += '<tr class="pad-t-b7"><th width="30px">序号</th><th width="100px">客户运单号</th><th width="240px">底盘号/车型描述</th>'
        newTable += '<th width="60px">库位</th><th width="100px">车型分类</th> <th width="140px">库存属性</th><th width="140px">目的地</th></tr>'
        let table_item_cont = ''
        // table_item_cont += (item.destLocationProvince ? item.destLocationProvince : '')
        for (var index = 0; index < data.length; index++) {
          const item = data[index]
          table_item_cont += '<tr><td>' + (index + 1 + current * size) + '</td><td>' + (item.cusWaybillNo ? item.cusWaybillNo : '') + '</td> <td>' + (item.lotNo1 ? item.lotNo1 : '') + '——' + (item.vehicleDescribe ? item.vehicleDescribe : '无') + '</span></td>'
          table_item_cont += '<td>' + (item.locationNo ? item.locationNo : '') + '</td><td>' + (item.materielId ? item.materielId : '') + '</td>'
          table_item_cont += '<td>' + (item.stockProperty ? item.stockProperty : '') + '</td><td>'
          table_item_cont += (item.destLocationCity ? item.destLocationCity : '')
          table_item_cont += (item.destLocationCounty ? item.destLocationCounty : '')
          table_item_cont += (item.destLocationGid ? item.destLocationGid : '') + '</td></tr>'
        }
        newTable = newTable + table_item_cont + '</table>'
        return newTable
      },
      // 打印页关闭
      keyPreparePrintHandleClose() {
        this.keyPreparePrintFlag = false
      },
      // 变更 =》multipleSelection
      keyPrepareConfirm() {
        const inputParams = {}
        inputParams.key = this.checkInfoids
        // inputParams.storeHouseId = this.$store.getters.currentStorehouse.id
        outboundKeyPrepareAPI.updateKeyPrepareStatus(inputParams).then(result => {
          if (result.code === 0) {
            this.$message({
              title: '操作成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
            this.dialogVisible = false
            this.checkInfoids = null
            this.list()
            if (this.checkHeadRow !== null) {
              this.getKeyPrepareDetail(this.checkHeadRow, null, null)
            }
          } else {
            this.$message({
              title: '错误提示',
              message: result.message,
              type: 'info',
              duration: 2000
            })
          }
        })
      },
      getInfoKeys() {
        const selects = this.$data.selectRowInfo
        this.checkInfoids = ''
        selects.forEach((v) => {
          this.$data.checkInfoids += v.prepareLineId + ','
        })
      },
      // 检查是否选择单条
      checkOneSelect(arr) {
        // console.log('multipleSelection', arr)
        const l = arr.length
        if (l === 0) {
          this.$message({
            message: '未选择',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (l > 1) {
          this.$message({
            message: ' 不可多选, 请选择单条调整!',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        return true
      },
      // 明细列表-列选中
      handleSelectionChangeInfo(val) {
        this.selectRowInfo = val
        this.getInfoKeys()
      },
      moreClick() {
        this.moreSearchVisible = !this.moreSearchVisible
      },
      selected(data) {
        this.tableData = data.results
        this.tableHeader = data.header
      },
      // 主表-列选择
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleSizeChange(val) {
        // 分页size变化
        this.search.size = val
        this.list()
      },
      handleCurrentChange(val) {
        // 分页当前页变化
        this.search.current = val
        this.list()
      },
      handleDialogClose() {
        // 关闭
        this.dialogVisible = false
      }
    }
  }
</script>
<style scoped>

</style>
